<template>
    <div class="user-info">
        <el-form 
            :model="formData" 
            ref="vForm" 
            :rules="rules" 
            label-position="left" 
            label-width="80px"
            size="default" 
            @submit.prevent>
            <!-- layui-row  el-row -->
            <!-- 栅格标签 :span="8"占8份 -->
            <el-row>
            <el-col :span="8" class="grid-cell">
                <el-form-item label="" prop="pictureupload86910" class="label-center-align">
                <el-upload :file-list="pictureupload86910FileList" :headers="pictureupload86910UploadHeaders"
                    :data="pictureupload86910UploadData" list-type="picture-card" show-file-list :limit="3"> <template
                    #default><i class="el-icon-plus"></i></template>
                </el-upload>
                </el-form-item>
                <div class="static-content-item">
                <div>姓名：张三</div>
                </div>
                <div class="static-content-item">
                <div>邮箱：1232132@qq.com</div>
                </div>
                <div class="static-content-item">
                <div>电话号码:1391415478</div>
                </div>
            </el-col>
            <el-col :span="16" class="grid-cell">
                <el-form-item label="昵称" prop="input92137" class="label-center-align">
                <el-input v-model="formData.input92137" type="text" clearable></el-input>
                </el-form-item>
                <el-form-item label="个性签名" prop="textarea22551" class="label-center-align">
                <el-input type="textarea" v-model="formData.textarea22551" rows="3"></el-input>
                </el-form-item>
                <div class="static-content-item">
                <el-button type="primary" style="width: 100%;">保存</el-button>
                </div>
            </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import {
    defineComponent,
    toRefs,
    reactive,
    getCurrentInstance
} from 'vue'
export default defineComponent({
    components: {},
    props: {},
    setup() {
      const state = reactive({
        formData: {
          pictureupload86910: null,
          input92137: "",
          textarea22551: "",
        },
        rules: {},
        pictureupload86910FileList: [],
        pictureupload86910UploadHeaders: {},
        pictureupload86910UploadData: {},
      })
      const instance = getCurrentInstance()
      const submitForm = () => {
        instance.proxy.$refs['vForm'].validate(valid => {
          if (!valid) return
          //TODO: 提交表单
        })
      }
      const resetForm = () => {
        instance.proxy.$refs['vForm'].resetFields()
      }
      return {
        ...toRefs(state),
        submitForm,
        resetForm
      }
    }
})
</script>
<style lang="scss" scoped>
.user-info{
    padding: 15px 20px;
}




.el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }
  
  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }
    
    .el-rate {
      margin-top: 8px;
    }
  }
  
  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }
    
    .el-rate {
      margin-top: 6px;
    }
  }
  
  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }
    
    .el-rate {
      margin-top: 4px;
    }
  }
  
  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }
  
  .clear-fix:after {
    clear: both;
  }
  
  .float-right {
    float: right;
  }
  
</style>

<style lang="scss" scoped>
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }
  
  div.tab-container {}
  
  .label-left-align :deep(.el-form-item__label) {
    text-align: left;
  }
  
  .label-center-align :deep(.el-form-item__label) {
    text-align: center;
  }
  
  .label-right-align :deep(.el-form-item__label) {
    text-align: right;
  }
  
  .custom-label {}
  
  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    line-height: 60px;

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }
  
</style>
